<template>
	<view class="homeBox">
		<view class="homenav" :style="{'top':navBarHeight+'px'}">
			<!-- <view class="homenavL">
				<image class="dibiao" :src="imgUrl+'address.png'" mode="widthFix" @click="openAddr" />
				全国
			</view> -->
			<view class="homenavR">
				<i class="iconfont icon-sousuo homenavRSousuo" />
				<input class="swiper1" type="text" />
			</view>
			<!-- <image @click="signInFun" class="qiandao" :src="imgUrl+'signIn.gif'"
								mode="aspectFill  "></image> -->
		</view>
		<view class="home-box":style="{'top':'calc('+navBarHeight+120+')px'}">
			<!-- 商品列表 -->
			<view class="shop-list">
				<view v-for="(item, index) in shopList" :key="index" class="shop-item">
					<!-- 商品图片 -->
					<image :src="item.image" mode="aspectFill" class="shop-image"></image>
					<!-- 商品信息 -->
					<view class="shop-info">
						<!-- 标题 -->
						<text class="shop-title">{{ item.title }}</text>
						<!-- 时间 -->
						<text class="shop-time">时间：{{ item.time }}</text>
						<!-- 地点 -->
						<text class="shop-location">地点：{{ item.location }}</text>
						<!-- 价格 -->
						<text class="shop-price">￥{{ item.price }}</text>
					</view>
				</view>
			</view>
		</view>
		<addressBox ref="addressBox" @addrFun="addrFun" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import addressBox from '@/components/cityPicker/addressBox.vue'
	export default {
		name: 'uni_home',
		components: {
			addressBox,
		},
		data() {
			return {
				imgUrl: this.$apiFun.imgUrl,
				host: this.$apiFun.host,
				NewsList: [], //输入框轮播文案
				// 输入框轮播
				indicatorDots1: false,
				autoplay1: true,
				vertical1: true,
				interval1: 5000,
				duration1: 1000,
				circular1: true,
				shopList: [{
						image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
						title: '商品标题1',
						time: '2023-10-01 14:00',
						location: '北京',
						price: '99.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
						title: '商品标题2',
						time: '2023-10-02 15:00',
						location: '上海',
						price: '89.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg',
						title: '商品标题3',
						time: '2023-10-03 16:00',
						location: '广州',
						price: '79.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
						title: '商品标题4',
						time: '2023-10-04 17:00',
						location: '深圳',
						price: '69.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
						title: '商品标题4',
						time: '2023-10-04 17:00',
						location: '深圳',
						price: '69.99'
					},
					{
						image: 'https://qcloud.dpfile.com/pc/kDGPxk7sSy-IMWjRxmVIHmd0uS8A9nsAJlUIyucibgyztIovP0BrKDTdf2ycVz5i.jpg',
						title: '商品标题4',
						time: '2023-10-04 17:00',
						location: '深圳',
						price: '69.99'
					}
				],
				paramObj: {
					addr: ''
				},
				navBarHeight:'',
			}
		},
		watch: {},
		computed: {
			//login_status 0 未登录 、1临时微信登录 2已登录
			...mapGetters([
				'login_status',

			]),

		},
		async onLoad(option) {
			// #ifdef MP-WEIXIN
			let menuButtonObject = uni.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 胶囊按钮上边界到屏幕顶部的距离 + 胶囊按钮的高度 + 状态栏高度（如果需要的话）
			this.navBarHeight = menuButtonObject.top + menuButtonObject.height + uni.getSystemInfoSync().statusBarHeight;
			console.log(navBarHeight);
			// #endif
			
			this.init()
		},
		mounted() {

		},
		methods: {
			async init() {
				let res = await this.$apiFun.getApi(this.$api.menuListApi)
				console.log('res', res)
			},
			openAddr() {
				this.$refs['addressBox'].open()
			},
			addrFun(val) {
				console.log('val---------', val)
			}
		},
		onReachBottom() {
			console.log(1111111111111)
		},
		onPullDownRefresh() {},
	}
</script>

<style scoped lang="less">
	page {
		width: 100%;
		height: 100%;
		background: #f2f2fa;
		color: #6c6c6c;

		.homeBox {
			width: 100%;
			height: 100%;
		}

		.home-box {
			padding: 0 15rpx;
			box-sizing: border-box;

		}

		.homenav {
			height: 100rpx;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: #ffffff;
			position:fixed;
			left:0;
			right:0;
			// top:0;
			z-index:1;
			.homenavL {
				display: flex;
				align-items: center;
				min-width: 120rpx;
				font-size: 30rpx;

				.dibiao {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
					color: #fd8585;
				}

			}

			.homenavR {
				display: flex;
				align-items: center;
				width: 100%;
				// padding: 0 0 0 30rpx;
				box-sizing: border-box;
				position: relative;
				flex: 1;

				.homenavRSousuo {
					position: absolute;
					z-index: 1;
					color: white;
					left: 60rpx;
				}

				.swiper1 {
					width: 100%;
					height: 60rpx;
					background-color: rgba(0, 0, 0, .1);
					margin: 0 auto;
					border-radius: 60rpx;
					padding: 0 50rpx 0 80rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #9a9b9d;
					line-height: 60rpx;
					width: 100%;
					overflow: hidden;
					border-radius: 6rpx;

					.swiper1View {
						white-space: nowrap;
					}
				}
			}

			.qiandao {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
			}
		}

		/* 商品列表 */
		.shop-list {
			margin-top: 15rpx;
			display: flex;
			flex-direction: column;
			/* 竖向排列 */
		}

		/* 单个商品项 */
		.shop-item {
			display: flex;
			align-items: center;
			padding: 0 15rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		/* 商品图片 */
		.shop-image {
			border-radius: 10rpx;
			width: 200rpx;
			height: 200rpx;
		}

		/* 商品信息 */
		.shop-info {
			flex: 1;
			padding: 20rpx;
		}

		/* 商品标题 */
		.shop-title {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.shop-time {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 5rpx;
		}

		/* 商品地点 */
		.shop-location {
			display: block;
			font-size: 28rpx;
			color: #666;
			margin-bottom: 10rpx;
		}

		/* 商品价格 */
		.shop-price {
			display: block;
			font-size: 32rpx;
			color: #ff5000;
			font-weight: bold;
		}


	}
</style>